<template>
				<view class="select-wraper">
		<view class="select-info">
			<view class="select-info-title f-center zcRelative">筛选 <view class="iconfont icon-guanbi" @tap="do_close"></view></view>
			<view class="color-blue">项目：</view>
			<view class="select-list-wrap ">
				<view class="flex test" style="flex-flow: wrap;">
					<block v-for="(item,index) in selectList" :key="index">
					<view @tap="get_select(item)" class="select-item f-center" :class="item.isSelect?'isSelect':''">{{item.name}}</view>
				 </block>
				</view>
			</view>
			<view class="color-blue">到期时间段：</view>
			<view class="date-wraper f-side">
				<view class="picker f-center">
					<picker @change="getStartDate"  mode="date"  :value="startDate">
						<view>{{startDate}}</view>
					</picker>
				</view>
				<view class="line"></view>
				<view class="picker f-center">
					<picker @change="getEndDate"  mode="date"  :value="endDate">
						<view>{{endDate}}</view>
					</picker>
				</view>
			</view>
			<view class="btn flex">
			   <button type="primary" @tap="do_submit(0)">重置</button>
			   <button type="primary" @tap="do_submit(1)">确定</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	let _this;
	export default{
				data() {
			return {
				startDate:'',
				endDate:'',
				selectList:[
					{name:'汽车保养',isSelect:false},
					{name:'汽车保养',isSelect:false},
					{name:'汽车保养',isSelect:false},
					{name:'汽车保养',isSelect:false},
					{name:'汽车保养',isSelect:false},
					{name:'汽车保养',isSelect:false},
					{name:'汽车保养',isSelect:false}
				]
			}
		},
		created(){
		_this = this
		 _this.startDate=_this.def_date();
		 _this.endDate=_this.def_date();
		},
		methods: {
			def_date(){
				let _date= new Date();
				let year =_date.getFullYear();
				let month = _date.getMonth() +1;
				let day = _date.getDate();
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;	
				return `${year}-${month}-${day}`;
			},
			getStartDate(e){
				_this.startDate = e.detail.value
			},
			getEndDate(e){
				_this.endDate = e.detail.value
			},
			do_close(){ //关闭
						_this.$emit("getSelectInfo")
			},
			do_submit(item){
				if(item){
					_this.$emit("getSelectInfo",item)
				}else{
					_this.startDate = _this.def_date();
					_this.endDate = _this.def_date();
					for(let key in _this.selectList){
						_this.selectList[key].isSelect = false
					}
				}
			},
			get_select(item){
				item.isSelect = !item.isSelect
			}
		}
	}
</script>

<style>
	.select-wraper{
			position: absolute;
			width: 100%;
			top:0;
			bottom: 0;
			background-color: rgba(0,0,0,.4);
		}
	.select-info{
		position: absolute;
		top:280upx;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		border-top-left-radius: 60upx;
		border-top-right-radius: 60upx;
	}
	.select-info-title{
		height: 90upx;
		line-height: 90upx;
		border-bottom: 1upx solid #F6F6F6;
		font-size: 32upx;
	}
	.icon-guanbi{
	position: absolute;
	right: 50upx;
	font-size: 22upx;
	
	}
	.color-blue{
		height: 60upx;
		line-height: 70upx;
		padding-left: 20upx;
		color: #73BCFC;
	}
	.select-list-wrap{
		overflow: auto;
		height: 400upx;
		flex-wrap: wrap;
		
	}
	.btn{
		position: fixed;
		bottom: 0;
		height: 100upx;
		line-height: 100upx;
		width: 100%;
	}
	.btn button:first-child{
		height: 100upx;
		flex: 0 0 250upx;
		background:#E6E6E6 ;
		color: #A3A3A3;
		border-radius: 0;
		border-top: 1upx solid #DDDDDD;
	}
	.btn button:last-child{
		border-radius: 0;
		flex: 1;
		height: 100upx;
		background-color:#50ADFD ;
		color:#fff ;
	}
	.date-wraper{
		height: 120upx;
		padding: 0 40upx;
	}
	.date-wraper .picker{
		height: 60upx;
		line-height: 60upx;
		width: 260upx;
		border-radius: 10upx;
		border: 1upx solid #E0E0E0;
	}
	.date-wraper .line{
		width: 80upx;
		height: 3upx;
		background-color:#D8D8D8 ;
	}

	.select-item{
		height: 50upx;
		line-height: 50upx;
		min-width: 150upx;
		margin: 10upx 0 20upx 30upx;
		background-color: #F0F0F0;
		color: #A3A3A3;
		border-radius: 6upx;
	}
	.isSelect{
		background-image: linear-gradient(to right, #57B0FF, #67CCF6);
		color: #fff;
	}
</style>
